<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        caret-color: transparent;
      }
      img {
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .wrapper {
        position: relative;
        margin: 100px auto 0;
        width: 400px;
        height: 250px;
        /* border: 1px solid black; */
        overflow: hidden;
      }
      .sliderPageEl {
        position: absolute;
        left: 0;
        top: 0;
        width: 2000px;
        height: 250px;
        display: flex;
      }
      .sliderPageEl li {
        width: 400px;
        height: 100%;
      }
      .sliderPageEl li a {
        width: 100%;
        height: 100%;
      }
      .sliderPageEl a img {
        width: 100%;
        height: 100%;
      }
      .wrapper .btn {
        position: absolute;
        background-color: rgba(106, 101, 101, 0.5);
        color: #fff;
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .wrapper .btn.leftBtn {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      .wrapper .btn.rightBtn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
      .wrapper .sliderIndex {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
      }

      .wrapper .sliderIndex span {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #ccc;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
      }
      .wrapper .sliderIndex span.active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul class="sliderPageEl">
        <li>
          <a href="#"><img src="./imgs/cat1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="./imgs/cat2.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="./imgs/cat3.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="./imgs/cat4.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#"><img src="./imgs/cat1.jpg" alt="" /></a>
        </li>
      </ul>
      <div class="btn leftBtn">&lt;</div>
      <div class="btn rightBtn">&gt;</div>
      <div class="sliderIndex">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <script src="./move.js"></script>
    <script>
      let timer = null;
      const sliderPageEl = document.querySelector(".sliderPageEl");
      const leftBtnEl = document.querySelector(".leftBtn");
      const rightBtnEl = document.querySelector(".rightBtn");
      const oSpanArray = document
        .getElementsByClassName("sliderIndex")[0]
        .getElementsByTagName("span");
      const moveWidth = sliderPageEl.children[0].offsetWidth;
      const num = sliderPageEl.children.length - 1;
      let index = 0;
      let lock = true;

      function autoMove(direction = "left->right") {
        if (lock) {
          lock = false;
          clearTimeout(timer);
          if (!direction || direction == "left->right") {
            index++;
            changeIndex(index);
            startMove(
              sliderPageEl,
              { left: sliderPageEl.offsetLeft - moveWidth },
              function () {
                if (sliderPageEl.offsetLeft == -num * moveWidth) {
                  index = 0;
                  sliderPageEl.style.left = "0px";
                }
                timer = setTimeout(autoMove, 1500);
                lock = true;
              }
            );
          } else if (direction == "right->left") {
            if (sliderPageEl.offsetLeft === 0) {
              sliderPageEl.style.left = -num * moveWidth + "px";
              index = num;
            }
            index--;
            changeIndex(index);
            startMove(
              sliderPageEl,
              { left: sliderPageEl.offsetLeft + moveWidth },
              function () {
                timer = setTimeout(autoMove, 1500);
                lock = true;
              }
            );
          }
        }
      }
      timer = setTimeout(autoMove, 1500);

      leftBtnEl.onclick = function () {
        autoMove("right->left");
      };

      rightBtnEl.onclick = function () {
        autoMove("left->right");
      };

      for (var i = 0; i < oSpanArray.length; i++) {
        (function (myIndex) {
          oSpanArray[i].onclick = function () {
            lock = false;
            clearTimeout(timer);
            index = myIndex;
            changeIndex(index);
            startMove(sliderPageEl, { left: -index * moveWidth }, function () {
              lock = true;
              timer = setTimeout(autoMove, 1500);
            });
          };
        })(i);
      }

      function changeIndex(_index) {
        for (let i = 0; i < oSpanArray.length; i++) {
          oSpanArray[i].className = "";
        }
        oSpanArray[_index].className = "active";
      }

      timer = setTimeout(autoMove, 1500);
    </script>
  </body>
</html>
